import React from 'react'
import { Card, Button, Table, Divider, Row, Modal } from 'antd'
import DescriptionList from 'components/DescriptionList'
import styles from './index.less'
import { contractOrderType, productType, contractOrderStatus, contractActionType } from 'utils/enumConfig'
import moment from 'moment'
import { LwjDownload } from 'components';

/** @namespace currentItem.contractNum 合同号 */
/** @namespace currentItem.contractOrderType 合同订单类型 */
/** @namespace currentItem.productType 产品类型 */
/** @namespace currentItem.status 合同订单状态 */
/** @namespace currentItem.pushToOMSNeeded 是否需要推送OMS */
/** @namespace currentItem.designNeeded 是否需要设计 */
/** @namespace currentItem.orderContractAt 合同签订时间 */
/** @namespace currentItem.installContractAt 合同安装时间 */
/** @namespace currentItem.designAttachment 设计方案 */
/** @namespace currentItem.contractActionTypes 合同操作 */
/** @namespace currentItem.orderQuoteSummary */
/** @namespace currentItem.orderQuoteSummary.quoteAttachment 报价方案 */
/** @namespace currentItem.orderQuoteSummary.memo 报价备注 */
/** @namespace currentItem.orderQuoteSummary.quoteDeniedReason 报价不通过原因 */
/** @namespace currentItem.orderQuoteSummary.preOrderAmount 原订单金额 */
/** @namespace currentItem.orderQuoteSummary.decorationRebateAmount 装修返点金额 */
/** @namespace currentItem.orderQuoteSummary.cabinetRebateAmount 样柜返点金额 */
/** @namespace currentItem.orderQuoteSummary.eventsAmount 活动优惠金额 */
/** @namespace currentItem.orderQuoteSummary.orderAmount 订单金额 */
/** @namespace currentItem.contractOrderActivitySummaries 合同订单操作总结 */
const PayModal = ({currentItem, toPay, payConfirmModalVisible, dispatch, queryParam, ...payModalProps}) => {
  const {Description} = DescriptionList

  /**
   * 表格的参数
   * @type {{columns: *[], dataSource: *, pagination: boolean, rowKey: string}}
   */
  const tableProps = {
    columns: [
      {
        title: '#',
        dataIndex: 'index',
        key: 'index',
        width: '10%',
        render: (text, record, index) => (index + 1),
      }, {
        title: '处理人姓名',
        dataIndex: 'handlerName',
        key: 'handlerName',
      }, {
        title: '处理备注',
        dataIndex: 'memo',
        key: 'memo',
      },
      {
        title: '处理时间',
        dataIndex: 'createTime',
        key: 'createTime',
        render: (text, record) => (moment(text).format("YYYY-MM-DD HH:mm:ss"))
      },
    ],
    dataSource: currentItem.contractOrderActivitySummaries || [],
    pagination: false,
    rowKey: 'createTime',
  }

  return (
    <div>
      <Modal {...payModalProps}>
        <Card className={styles.card} bordered={false}>
          <DescriptionList size="large"
                           title="待缴尾款详情"
                           style={{marginBottom: 32}}>
            <Description term="合同号">{currentItem.contractNum}</Description>
            <Description term="订单类型">{contractOrderType[(currentItem.contractOrderType)]}</Description>

            <Description term="产品类型">{productType[(currentItem.productType)]}</Description>
            <Description term="状态">{contractOrderStatus[(currentItem.status)]}</Description>
            <Description term="推送丽维家">{currentItem.pushToOMSNeeded ? '是' : '否'}</Description>
            <Description term="需要设计">{currentItem.designNeeded ? '是' : '否'}</Description>
            <Description term="合同签订时间">{moment(currentItem.orderContractAt).format("YYYY-MM-DD HH:mm:ss")}</Description>
            <Description term="合同安装时间">{moment(currentItem.installContractAt).format("YYYY-MM-DD HH:mm:ss")}</Description>
            {currentItem.designAttachment && <Description term="设计方案">{<LwjDownload title={'点击下载'} targetUrl={currentItem.designAttachment}/>}</Description>}
            <Description term="合同操作">{contractActionType[(currentItem.contractActionTypes)]}</Description>
          </DescriptionList>

          {typeof currentItem.orderQuoteSummary === 'object' && <Divider style={{marginBottom: 32}}/>}
          {typeof currentItem.orderQuoteSummary === 'object' && <DescriptionList size="large"
                            title="订单报价总结"
                            style={{marginBottom: 32}}>
            {currentItem.orderQuoteSummary.quoteAttachment && <Description term="报价方案">{<LwjDownload title={'点击下载'} targetUrl={currentItem.orderQuoteSummary.quoteAttachment}/>}</Description>}
            <Description term="报价备注">{currentItem.orderQuoteSummary.memo || '暂无'}</Description>
            <Description term="报价不通过原因">{currentItem.orderQuoteSummary.quoteDeniedReason || '暂无'}</Description>
            <Description term="原订单金额">¥{currentItem.orderQuoteSummary.preOrderAmount || '暂无'}</Description>
            <Description term="装修返点金额">¥{currentItem.orderQuoteSummary.decorationRebateAmount || '暂无'}</Description>
            <Description term="样柜返点金额">¥{currentItem.orderQuoteSummary.cabinetRebateAmount || '暂无'}</Description>
            <Description term="活动优惠金额">¥{currentItem.orderQuoteSummary.eventsAmount || '暂无'}</Description>
            <Description term="订单金额">¥{currentItem.orderQuoteSummary.orderAmount || '暂无'}</Description>
          </DescriptionList>}

          <Divider style={{marginBottom: 32}}/>


          {Array.isArray(currentItem.contractOrderActivitySummaries) && <Table {...tableProps}/>}

        </Card>
        <Row type="flex" justify="center">
          <Button type="primary" onClick={() => toPay(currentItem)}>缴纳</Button>
        </Row>
      </Modal>
      {payConfirmModalVisible && <Modal
        title="缴纳尾款"
        visible={payConfirmModalVisible}
        onOk={() => {
          dispatch({
            type: 'contractOrders/onPay',
            payload: {currentItem: currentItem, queryParam: queryParam}
          })
        }}
        confirmLoading={false}
        onCancel={() => {
          dispatch({
            type: 'contractOrders/hideModal',
            payload: {}
          })
        }}>
        您确认要缴纳合同号为{currentItem.contractNum}的尾款么?
      </Modal>}
    </div>
  )
}

export default PayModal
